<template>
  <div class="padding">
    <project-statistics/>
    <a-card>
      <a-flex class="margin-bottom" justify="space-between">
        <a-space>
          <create/>
        </a-space>
        <Search @search="searchChange"/>
      </a-flex>
      <a-list :data-source="dataSource" :loading="state.loading">
        <template #renderItem="{ item }">
          <a-list-item>
            <a-list-item-meta :title="item.name" :description="item.description">
              <template #avatar>
                <a-avatar shape="square" :size="48" :src="item.cover" />
              </template>
            </a-list-item-meta>
            <div class="project-content">
              <div class="content-item  width-xs">
                <a-tag color="blue">{{ item.status }}</a-tag>
              </div>
              <div class="content-item width-sm">
                <div class="title">负责人</div>
                <a-avatar size="small" :src="item.leader.avatar"/>
                {{ item.leader.username }}
              </div>
              <div class="content-item width-sm">
                <div class="title">金额</div>
                <span class="price">2460.00</span>
              </div>
              <div class="content-item width-md show-md-only">
                <div class="title">起止日期</div>
                {{ item.startDate }} ~ {{ item.endDate }}
              </div>
            </div>
            <template #actions>
             <span class="action-item"><fund-view-outlined class="margin-right-sm"/>详情</span>
             <a-dropdown>
              <span class="action-item">更多 <down-outlined class="font-size-ssm"/></span>
             </a-dropdown>
            </template>
          </a-list-item>
        </template>
      </a-list>
      <use-pagination position="center" :total="1500"/>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import {onMounted, reactive, ref} from 'vue';
import Create from "@/views/project/components/Create.vue";
import ProjectStatistics from './components/ProjectStatistics.vue';
import {getProjectList} from '@/api/modules/project';
import {DownOutlined, FundViewOutlined} from '@ant-design/icons-vue'
import Search from './components/Search.vue';
import UsePagination from '@/components/UsePagination.vue';

const state = reactive({
  loading:false
})

const dataSource = ref<ProjectItemType[]>([]);

const getDataList = async () => {
  dataSource.value = await getProjectList();
};
onMounted(()=>{
  getDataList()
})
const searchChange = (e:ProjectSearchParamsType)=>{
  console.log(e)
}
// 根据状态返回不同的颜色
const getStatusColor = (status: string) => {
  switch (status) {
    case '进行中':
      return 'blue';
    case '已完成':
      return 'green';
    case '暂停':
      return 'orange';
    default:
      return 'red';
  }
};
</script>

<style scoped>
.project-content {
  display: flex;
  color: #666;
  align-items: center;
}
.project-content .title {
  margin-bottom: 4px;
  color: #999;
}

@media screen and (max-width: 1580px) {
  .show-md-only{
    display: none;
  }
}
</style>